<template>
  <div class="assess-box">
    <span class="model-title">模型精度评定</span>
    <div class="model-top-box">
      <el-table
        v-if="props.modelObj.typeId != 3"
        border
        :data="accEvaResult"
        style="width: 100%"
        size="small"
        height="100%"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="blknm" label="预报断面" width="150" align="center" />
        <el-table-column label="预报项目" prop="fcProj" align="center" />
        <el-table-column label="预报方案精度" align="center">
          <el-table-column label="总场次" prop="ccNum" align="center" />
          <el-table-column label="合格场次" prop="qualNum" align="center" />
          <el-table-column label="合格率(%)" prop="rate" align="center" />
          <el-table-column label="等级" prop="grade" align="center" />
        </el-table-column>
      </el-table>
      <el-table
        v-else
        border
        :data="[]"
        style="width: 100%"
        size="small"
        height="100%"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="blknm" label="预报断面" width="150" align="center" />
        <el-table-column prop="blknm" label="计算总场次" width="150" align="center" />
        <el-table-column prop="blknm" label="合格场次" width="150" align="center" />
        <el-table-column prop="blknm" label="合格率" width="150" align="center" />
        <el-table-column prop="blknm" label="评定等级" width="150" align="center" />
      </el-table>
    </div>
    <!-- <span class="model-title">模型时效评定</span>
    <div class="model-bottom-box">
      <el-table
        border
        :data="durEvaResult"
        style="width: 100%"
        height="100%"
        size="small"
        empty-text="暂无数据"
        highlight-current-row
      >
        <el-table-column label="预报断面" prop="aaa" align="center" />
        <el-table-column label="计算总场次" prop="ccNum" align="center" />
        <el-table-column label="成功场次" prop="sucNum" align="center" />
        <el-table-column label="成功率(%)" prop="aaa" align="center" />
        <el-table-column label="最大耗时" prop="durLong" align="center" />
        <el-table-column label="最小耗时" prop="durShort" align="center" />
        <el-table-column label="平均耗时" prop="durAvg" align="center" />
        <el-table-column label="耗时要求" prop="allowTake" align="center" />
        <el-table-column label="评定等级" prop="grade" align="center" />
      </el-table>
    </div> -->
  </div>
</template>

<script setup>
import { evaAccuracy, evaTimeliness } from '@/assets/data/com_data/eva_result.json'
import { reactive, ref, onMounted } from 'vue'
//接入接口
import { getXajdurEvaResult, getXajaccEvaResult } from '@/services/modules/model-verify'
const props = defineProps({
  ccId: {
    type: Number,
    default: 0
  },
  modelObj: {
    type: Object,
    default: () => {}
  }
})
onMounted(() => {
  getAccEvaResult()
  getdurEvaResult()
})
let accEvaResult = ref([])
const getAccEvaResult = (id) => {
  getXajaccEvaResult({
    scid: props.ccId
  }).then((res) => {
    if (res.code === 200) {
      accEvaResult.value = res.data
    }
  })
}
let durEvaResult = ref([])
const getdurEvaResult = (id) => {
  getXajdurEvaResult({
    scid: props.ccId
  }).then((res) => {
    if (res.code === 200) {
      durEvaResult.value = res.data
    }
  })
}

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 4 === 0) {
      return {
        rowspan: 4,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
const evaArr = reactive([evaTimeliness])
const state = reactive({
  accuracyFrom: []
})
const changeData = (id, name) => {
  let newArr = evaAccuracy.filter((e) => {
    return e.blkcd === id
  })
  state.accuracyFrom = newArr
}
defineExpose({
  changeData
})
</script>

<style lang="less" scoped>
.assess-box {
  width: 100%;
  height: 100%;
  font-size: var(--content-fontsize);
  :deep(.el-table) {
    th {
      padding: 0;
    }
    td {
      padding: 0;
    }
  }
  .model-title {
    margin-left: 10px;
    height: 30px;
    display: inline-block;
    font-weight: 600;
    line-height: 30px;
  }
  .model-top-box {
    height: 250px;
    width: 100%;
  }
  .model-bottom-box {
    height: calc(100% - 330px);
    width: 100%;
  }
}
</style>
